<template>
  <div>
    <div class="pinDanDetails">
      <!--<headers title="拼单详情"></headers>-->
      <section>
        <div class="top" @click="goPin()">
          <div class="pic left"><img :src="goodsInfo.mallImg" alt=""></div>
          <div class="right">
            <span class="goodsName">{{goodsInfo.mallName}}</span>
            <p class="goodsSpec gray">{{goodsInfo.specificationsName}}</p>
            <p class="goodsPrice">
              <span class="red">￥{{goodsInfo.salePrice / 100}}</span>
              <span class="gray">京东价：{{goodsInfo.jdPrice / 100}}</span>
            </p>
            <p class="goodsNum gray">已拼单件数：{{gpCount}}件</p>
          </div>
        </div>

        <div class="invitation">
          <p>还差
            <span style="color: #fe3519;">{{goodsNum}}</span>
            件，赶快参团或邀请好友参团</p>
          <div class="friends">
            <ul>
              <li v-for="item in joinUsers" class="left">
                <!--<img :src="item.src"/>-->
                <img :src="item.headImg" alt="">
              </li>
              <!--<li v-for="i in leftNum" class="left">
                &lt;!&ndash;<img :src="item.src"/>&ndash;&gt;
                <img src="../assets/images/pinDan/cantuan.png" alt="">
              </li>-->
            </ul>
          </div>
          <div>
            <button class="btn btn1" @click="goPin()" v-if="show">
              立即参团，
              <Countdown :gpEndTime="Date.parse(new Date(timeEnd)).toString()" endText="已经结束了" ref="cd"></Countdown>
            </button>
            <button class="btn btn1" @click="goPin()" v-else>该拼单商品人数已满</button>
            <button class="btn btn2" @click="scanCode()">面对面扫码</button>
            <button class="btn btn3" @click="invite()">邀请好友</button>
          </div>
        </div>

        <div class="bottom">
          <div class="gdetail" @click="goPin()">
            <mt-cell
              title="商品详情"
              href="./goodsDetails"
              is-link
              :value="goodsInfo.mallName">
            </mt-cell>
          </div>
          <div class="faqiren">
            <mt-cell title="拼团发起人" :value="creator"></mt-cell>
          </div>
          <mt-cell
            title="拼单须知"
            href="/pinDanDetails"
            is-link
            value="人满发货·人不满退款·好友拼单">
          </mt-cell>
        </div>

        <!--<div class="morePinDan">-->
        <!--<mt-cell title="更多拼单"></mt-cell>-->
        <!--<goods :goodsArr="goodsArr"></goods>-->
        <!--</div>-->
      </section>
      <!--遮罩层-->
      <div class="zhezhao" v-if='zhezhao1' @click="zzceng1()">
        <div class="zzc1_content" v-if="zzc1">
          <img src="../assets/images/pic@1x.png" alt="">
          <span class="span1" v-if="show">
            <Countdown :gpEndTime="Date.parse(new Date(timeEnd)).toString()" endText="已经结束了" ref="count"></Countdown>
          </span>
          <span class="span1" v-else>该拼单商品人数已满</span>
          <p>邀请好友参与，才能拼单成功哦！</p>
          <span class="span2">还差&nbsp;<span style="color: #fe3519;">{{goodsNum}}&nbsp;</span>人，点击右上角发送给好友</span>
        </div>
        <div class="zzc2_content" v-if="zzc2">
          <div class="content">
            <!--<img src="" alt="" class="content-img">-->
            <!--<p>{{shops[index].shopName}}</p>-->
            <p>更多优惠,等你来拼!</p>
            <canvas class="tupian" id="canvas"></canvas>
            <p>记得邀请好友参与，拼单更快哦！</p>
          </div>
        </div>
        <div class="zzc3_content" v-if="zzc3">
          <div class="zzc2_top">
            <img src="../assets/images/ico@1x.png" alt="">
            <span>分享成功</span>
          </div>
          <div class="zzc2_sec">
            <p>分享越多，拼单成功率越好哦！</p>
            <button class="zzc2_btn1">继续分享</button>
            <div>
              <img src="../assets/images/line@1x.png" alt="">
              <span>好货提示</span>
            </div>
            <p>查看更多好货，获得更多优惠</p>
            <button class="zzc2_btn2">回到首页</button>
          </div>
        </div>
      </div>
      <!--<router-view/>-->
    </div>
    <loading v-show="showLoading"></loading>
    <alertTip v-if="showAlert" @closeTip="go()" :alertText="alertText"></alertTip>

  </div>

</template>

<script>
  /* eslint-disable semi */
  import Vue from 'vue'
  import QRCode from 'qrcode'
  import {msg_10053} from '../message/msg_10053'
  import wx from 'weixin-js-sdk'
  import {
    wxHttpTool,
    wx_config,
    http_getParam,
    get_shopQrcoe,
    wx_share,
    wx_hideAllMenu
  } from '../components/httpUtil/httpUtil'
  import {msg_10046} from '../message/msg_10046'
  import {relogin} from "./httpUtil/httpUtil";

  Vue.use(QRCode)

  export default {
    name: 'pinDanDetails',
    data() {
      return {
        creator: '',
        goodsNum: 0,
        gpCount: 0,
        show: true,
        goodsInfo: {},
        joinUsers: [],
        timeEnd: 0,
        // 遮罩层
        zhezhao1: false,
        showLoading: true, //显示加载动画
        zzc1: false,
        zzc2: false,
        zzc3: false,
        showAlert: false,
        alertText: null,
        type: ''
//        dis: ''
      }
    },
    updated() {
      this.useqrcode()
    },
    methods: {
      alertTip(msg) {
        this.showAlert = true;
        this.alertText = msg;
      },
      go() {
        this.showAlert = false
      },
      // 隐藏动画
      hideLoading() {
        this.showLoading = false;
      },
//      生成二维码
      useqrcode() {
//        const shopStr = window.location.search;
        const shopUrl = window.localStorage.pdGoodUrl;
//        const shopStr = this.shopInfo.shopUrl.split('?')[1].split('&');
//        console.log(shopStr)
        console.log(shopUrl)
        let canvas = document.getElementById('canvas')
        let canvs = QRCode.toCanvas(canvas, shopUrl, function (error) {
          if (error) console.error(error)
          console.log('success!');
        })
      },
      fn10011() {
//        console.log(this.$route.params.gpId)
        const jsonValue = JSON.stringify({
          'c': '10011',
          'p': {
            'userId': JSON.parse(window.localStorage.data).id, // 用户ID
            'GPurchaseId': this.$route.params.gpId || JSON.parse(window.localStorage.gpId), // 拼团ID
            'tokenId': token()
          }
        });
        this.$http.post(api + '/qqs.us', jsonValue).then((res) => {
          console.log(res);
          const data = res.data.p;
          if (data.isTrue === true) {
            this.hideLoading();
//            alert('成功');
//            this.creatorName = data.creatorName;
            this.goodsInfo = data.goodsInfo;
            console.log(this.goodsInfo)
            this.gpCount = data.gpCount; // 已拼单件数
            this.goodsNum = data.groupPurchase.goodsNum; // 还差多少件
            if (this.goodsNum<=0) {
              this.show = false;
            }
            // 参团用户
            this.joinUsers = data.joinUsers;
            //  console.log(goodsInfo.timeEnd);
            // 将获取到的截止时间转换成字符串，才能传给子组件
            this.timeEnd = data.groupPurchase.timeEnd;// 钩子函数中不能JSON input
            this.$refs.cd.countdown(Date.parse(new Date(this.timeEnd)).toString());
            const malltitle = this.goodsInfo.mallName
            const mallurl = window.location.href.replace('fxpdDetails', 'pinDanDetails')
            const mallimg = this.goodsInfo.mallImg
            const mallprice = this.goodsInfo.salePrice / 100
            wx_share(malltitle, mallurl, mallimg, '价格:' + mallprice);
          } else {
            this.hideLoading();
            this.alertTip(data.errorMsg);
            if (data.errorCode === 90) {
              this.go = () => {
                this.showAlert = false
                let _this = this;
                relogin(_this)
              }
            }
          }
        }, (res) => {
          this.hideLoading();
          this.telephone = '';
          this.alertTip("网络错误");
          this.go = function () {
            this.showAlert = false;
          }
          // alert('网络错误');
        })
      },
      goPin() {
        console.log(Date.parse(new Date()))
        if (Date.parse(new Date(this.timeEnd)) > Date.parse(new Date()) && this.show ==true) {
          this.$router.push({
            name: 'PinDetail',
            query: {
              shopId: window.localStorage.shopId,
              msId: window.localStorage.msId,
              gpId: window.localStorage.gpId,
              shopType: 1
            }
          })
        } else {
          this.alertTip("此拼单已结束，谢谢惠顾");
          this.go = function () {
            this.showAlert = false;
          }
        }

      },
//      canTuan () {
//        alert('立即参团');
//      },
      scanCode() {
//        alert('面对面扫码')
        this.zhezhao1 = true;
        this.zzc2 = true;
      },

      invite() {
//        alert('邀请好友');
        this.zhezhao1 = true;
        this.zzc1 = true;
      },
      zzceng1() { // 点击遮罩层关闭
        this.zhezhao1 = false;
        this.zzc1 = false;
        this.zzc2 = false;
        this.zzc3 = false;
      }
    },
    mounted() {
      if (window.localStorage.data && JSON.parse(window.localStorage.data).type == 1) {
        this.type = '1';
      } else {
        this.type = '0';
      }
      wxHttpTool.wxAuthor(this, function (varRet, varJson, varThis = this) {
        if (varRet == -1) {
          varThis.alertTip('网络错误');
          varThis.go = function () {
            varThis.showAlert = false;
          }
        }
        // 关注钱应该判断下是否已经关注过了
        msg_10053.send(varThis, msg_10053.entity(), function (varThis, res) {

        })
        document.documentElement.scrollTop = 0;

        window.localStorage.goodUrl = window.location.href;
        console.log(window.localStorage.goodUrl)
        // const str = window.location.href.split('?')[1].split('&');
        // console.log(str)
        const shopId = parseInt(http_getParam('shopId'));
        const msId = parseInt(http_getParam('msId'));
        const gpId = parseInt(http_getParam('gpId'));
        varThis.creator = http_getParam('creator')
        console.log(shopId);
        console.log(msId);
        console.log(gpId);
        window.localStorage.shopId = shopId;
        window.localStorage.msId = msId;
        window.localStorage.gpId = gpId;

        let pdGoodUrl = window.location.href.replace('fxpdDetails', 'pindetail').split('?')[0] + '?shopId=' + window.localStorage.shopId + '&msId=' + window.localStorage.msId + '&gpId=' + window.localStorage.gpId + '&shopType=1';
        window.localStorage.pdGoodUrl = pdGoodUrl;
        console.log(window.localStorage.pdGoodUrl)

        varThis.fn10011();
        msg_10046.send(varThis, msg_10046.entity(), function (varThis, res) {
          varThis.hideLoading();
          wx_hideAllMenu();
          wx.hideMenuItems({
            //禁用单独分享朋友圈QQ空间等功能
            menuList: ["menuItem:share:timeline", "menuItem:share:QZone", "menuItem:share:qq"] // 要隐藏的菜单项，所有menu项见附录3
          });
        })

      }, this.type)

    },
//      this.getData();


  }
</script>

<style scoped>
  html {
    position: relative;
  }

  .pinDanDetails section {
    /*flex: 1 1 auto;*/
    background-color: #f4f4f4;
    /*margin-top: 80px;*/
    flex: 1;
    /*height: 100%;*/
  }

  /*拼单商品*/
  .pinDanDetails section .top {
    height: 326px;
    background: #fff;
  }

  .pinDanDetails section .top .left img {
    width: 240px;
    height: 240px;
    margin: 40px 0 0 30px;
  }

  .pinDanDetails section .top .right {
    margin-top: 40px;
    width: 53%; /*让文本自动换行，自适应*/
    margin-left: 26px;
    float: left;
  }

  .pinDanDetails section .top .right > .goodsName {
    font-size: 28px;
    color: #3b3b43;
    /*只显示两行文字*/
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .pinDanDetails section .top .right .goodsSpec {
    font-size: 20px;
    margin-top: 14px;
  }

  .pinDanDetails section .top .right .goodsPrice {
    font-size: 42px;
    margin: 20px 0 17px;
  }

  .pinDanDetails section .top .right .goodsPrice .gray {
    font-size: 20px;
    /*text-align: center;*/
    margin-left: 18px;
  }

  .pinDanDetails section .top .right .goodsNum {
    font-size: 24px;
  }

  /*邀请好友参团*/
  .pinDanDetails section .invitation {
    background: #fff;
    /*padding: 0 32px;*/
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 20px 0;
    padding-top: 30px;
  }

  .pinDanDetails section .invitation > p {
    font-size: 24px;
    color: #3b3b43;
  }

  .pinDanDetails section .invitation .friends {
    margin: 32px 0 0 32px;
  }

  .pinDanDetails section .invitation .friends ul li {
    width: 84px;
    height: 84px;
    margin: 0 37px 37px 0;
  }

  .pinDanDetails section .invitation .friends ul li img {
    width: 84px;
    height: 84px;
    border-radius: 50%;
  }

  /*邀请按钮*/
  .pinDanDetails section .invitation .btn1 {
    width: 470px;
    height: 74px;
    background: url("../assets/images/pinDan/bg1.png") no-repeat;
    display: block;
    font-size: 28px;
    color: #ffffff;
    margin-bottom: 34px;
  }

  .pinDanDetails section .invitation .btn2, .btn3 {
    width: 214px;
    height: 67px;
    background: url("../assets/images/pinDan/bg2.png") no-repeat;
    font-size: 24px;
    color: #fe3519;
    margin-bottom: 56px;
  }

  .pinDanDetails section .invitation .btn2 {
    margin-right: 42px;
  }

  .pinDanDetails section .invitation .btn {
    background-size: 100%;
    outline: none;
    border: none;
    border-radius: 30px;
  }

  /*更多拼单*/
  .morePinDan {
    /*width: 100%;*/
    height: auto;
    margin-top: 20px;
  }

  /*立即参团遮罩层*/
  .zhezhao {
    width: 100%;
    height: 100%;
    background: rgba(126, 126, 126, 0.5);
    z-index: 20000;
    position: fixed;
    top: 0px;
  }

  .zhezhao .zzc1_content, .zzc2_content, .zzc3_content {
    width: 500px;
    height: 240px;
    background: #fff;
    position: absolute;
    top: 238px;
    /*right: 78px;*/
    left: 50%;
    transform: translate(-50%, 0); /*左边50%，再平移自身的-50%*/
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }

  .zhezhao .zzc1_content img {
    width: 40px;
    height: 68px;
    position: relative;
    top: -100px;
    /*right: 78px;*/
    left: 50%;
    transform: translate(-50%, 0);
  }

  .zhezhao .zzc1_content span {
    /*display: inline-block;*/
    color: #a1a1a1;
    font-size: 24px;
  }

  .zhezhao .zzc1_content .span2 {
    margin-bottom: 70px;
  }

  .zhezhao .zzc1_content span b {
    font-size: 32px;
    color: #3e434c;
  }

  .zhezhao .zzc1_content p {
    color: #fe3519;
    font-size: 28px;
    margin: 25px 0 25px;
  }

  .zhezhao .zzc2_content {
    width: 426px;
    height: 564px;
    top: 295px;
    right: 95px;
  }

  .zhezhao .zzc2_content .content {
    width: 100%;
    height: 100%;
    background-color: #fff;
    box-sizing: border-box;
    padding: 38px 30px;
    border-radius: 8px;
  }

  .zhezhao .zzc2_content .content .content-img {
    float: left;
    width: 80px;
    height: 80px;
    margin-right: 20px;
    border-radius: 50%;
  }

  .zhezhao .zzc2_content .content p:nth-child(1) {
    margin: 20px 0 0 70px;
    width: 250px;
    font-size: 28px;
    float: left;
    color: #454343;
  }

  .zhezhao .zzc2_content .content p:last-child {
    width: 100%;
    font-size: 22px;
    color: #fe3519;
    text-align: center;
  }

  .zhezhao .zzc2_content .content .tupian {
    width: 307px !important;
    height: 307px !important;
    margin: 0 auto 0 !important;
    margin-left: 30px !important;
    border: none;
    /*>img{*/
    /*width: 100%;*/
    /*height: 100%;*/
    /*border: none;*/
    /*}*/
  }

  #canvas {
    width: 307px !important;
    height: 307px !important;
    margin: 0 auto 0 !important;
    margin-left: 30px !important;
    border: none;
  }

  .zhezhao .zzc3_content {
    width: 426px;
    height: 564px;
    top: 295px;
    right: 95px;
  }

  .zhezhao .zzc3_content .zzc2_top {
    width: 100%;
    height: 102px;
    background: #f3f6fa;
    text-align: center;
    line-height: 102px;
    font-size: 32px;
    color: #454343;
  }

  .zhezhao .zzc3_content .zzc2_top img {
    width: 51px;
    height: 51px;
    margin-right: 16px;
    vertical-align: middle;
  }

  .zhezhao .zzc3_content .zzc2_sec {
    width: 100%;
    text-align: center;
    padding-top: 38px;
    color: #a1a1a1;
    font-size: 24px;
  }

  .zhezhao .zzc3_content .zzc2_sec .zzc2_btn1 {
    width: 300px;
    height: 74px;
    background: url("../assets/images/btn_1@1x.png") no-repeat;
    background-size: 100%;
    border: none;
    outline: none;
    color: #ffffff;
    font-size: 28px;
    margin: 42px 0 38px;
  }

  .zhezhao .zzc3_content .zzc2_sec div {
    width: 350px;
    height: 35px;
    text-align: center;
    position: relative;
    margin-bottom: 30px;
  }

  .zhezhao .zzc3_content .zzc2_sec div img {
    width: 350px;
    height: 1px;
    vertical-align: middle;
    margin-left: 40px;
  }

  .zhezhao .zzc3_content .zzc2_sec div span {
    font-size: 20px;
    color: #fe3519;
    position: absolute;
    top: 0;
  }

  .zhezhao .zzc3_content .zzc2_sec .zzc2_btn2 {
    width: 295px;
    height: 65px;
    background: url("../assets/images/btn_2@1x.png") no-repeat;
    background-size: 100%;
    color: #fe3519;
    border: none;
    outline: none;
    margin: 40px 0 35px;
  }
</style>

<!--改UI组件中的css，不加scoped-->
<style>
  /*商品详情、发起人、须知*/
  .pinDanDetails .mint-cell-value {
    width: 330px;
    font-size: 24px;
  }

  .pinDanDetails .gdetail .mint-cell-value {
    width: 320px;
  }

  .pinDanDetails .gdetail .mint-cell-value span {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .pinDanDetails .mint-cell-wrapper {
    background-image: none;
  }

  .pinDanDetails .mint-cell-value span {
    width: 100%;
    text-align: right;
  }

  .pinDanDetails .faqiren .mint-cell-value span {
    padding-right: 20px;
  }

  .pinDanDetails .morePinDan .mint-cell-title {
    font-size: 24px;
  }

</style>
